import React from 'react';
import {Router, Route, Link} from 'react-router';
import utils from '../../js/utils';
import config from '../../../config/config';

class Header extends React.Component {
  constructor () {
    super();

    this.state = {
      message: config.app.self.message
    }

    this.showBambooHeaderBox = this.showBambooHeaderBox.bind(this);
    this.hideBambooHeaderBox = this.hideBambooHeaderBox.bind(this);

    this.logout = this.logout.bind(this);
  }

  componentDidMount () {

  }

  showBambooHeaderBox () {
    $('#bambooHeaderBox').show();
  }
  hideBambooHeaderBox () {
    $('#bambooHeaderBox').hide();
  }

  logout () {
    window.location = "/#/login";
    // 清空cookie
    $.cookie("token", null);
  }

  render () {
    return (
      <div className="bamboo-header">
        <img src="/static/images/logo.png" />
        <div className='bamboo-header-pannel'>
          <span>
            个人中心
            <img src={config.app.self.head} onClick={this.showBambooHeaderBox}/>
          </span>

          <div id="bambooHeaderBox">
            <div className='bamboo-hide' onClick={this.hideBambooHeaderBox}></div>
            <div>
              <div className='bamboo-header-message'>
                <i className='fa fa-bell-o'></i>{this.state.message}
              </div>
              <div className='bamboo-header-links'>
                {
                  config.app.self.links.map(function (item, idx) {
                    return <Link to={item.redirect} key={idx}>
                      <i className={item.icon_font}></i>
                      <span>{item.text}</span>
                    </Link>
                  })
                }
              </div>
              <div className='bamboo-quit'>
                <a href="javascript:void(0)" onClick={this.logout}><img src="/static/icon/quit.png" />退出登陆</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Header;
